/**
 * ChatInterface Component
 * Requirements: 2.1
 * 
 * A Mobius-style chat interface for user input
 */

import { useState, FormEvent, KeyboardEvent } from 'react';
import { ChatInterfaceProps } from '../types';

export const ChatInterface = ({ 
  onSubmit, 
  isLoading, 
  placeholder = '分享你的想法...' 
}: ChatInterfaceProps) => {
  const [inputValue, setInputValue] = useState('');
  const [error, setError] = useState<string>('');

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    
    // Clear any previous errors
    setError('');
    
    // Validate input (prevent empty/whitespace-only submissions)
    const trimmedValue = inputValue.trim();
    if (!trimmedValue) {
      setError('请输入内容');
      return;
    }
    
    try {
      await onSubmit(trimmedValue);
      // Keep input after successful submission (don't clear)
      // setInputValue('');
    } catch (err) {
      setError('提交失败，请重试');
    }
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    // Submit on Enter (without Shift)
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSubmit(e as unknown as FormEvent);
    }
  };

  return (
    <div className="w-full max-w-2xl mx-auto">
      <form onSubmit={handleSubmit} className="relative">
        {/* Mobius-style container with gradient border */}
        <div className="relative bg-gradient-to-br from-purple-500/20 via-blue-500/20 to-indigo-500/20 rounded-xl sm:rounded-2xl p-1 backdrop-blur-sm">
          <div className="bg-gray-900/80 rounded-lg sm:rounded-xl p-3 sm:p-4">
            <textarea
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder={placeholder}
              disabled={isLoading}
              rows={3}
              className="w-full bg-transparent text-white placeholder-gray-400 resize-none focus:outline-none text-base sm:text-lg"
            />
            
            {/* Error message */}
            {error && (
              <div className="text-red-400 text-sm mt-2">
                {error}
              </div>
            )}
            
            {/* Submit button - Responsive sizing */}
            <div className="flex justify-end mt-2 sm:mt-3">
              <button
                type="submit"
                disabled={isLoading}
                className={`
                  px-4 sm:px-6 py-2 rounded-lg font-medium transition-all duration-300 text-sm sm:text-base
                  ${isLoading 
                    ? 'bg-gray-600 cursor-not-allowed' 
                    : 'bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 hover:shadow-lg hover:shadow-purple-500/50'
                  }
                  text-white
                `}
              >
                {isLoading ? (
                  <span className="flex items-center gap-2">
                    <svg className="animate-spin h-4 w-4 sm:h-5 sm:w-5" viewBox="0 0 24 24">
                      <circle 
                        className="opacity-25" 
                        cx="12" 
                        cy="12" 
                        r="10" 
                        stroke="currentColor" 
                        strokeWidth="4"
                        fill="none"
                      />
                      <path 
                        className="opacity-75" 
                        fill="currentColor" 
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      />
                    </svg>
                    分析中...
                  </span>
                ) : (
                  '分析情绪'
                )}
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  );
};
